<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
  </head>
  <body>
    <span>上传图片</span>
    <input type="file" name="name" value="" onChange="handleInputChange(this);">
    <img src="" id="showPhoto" alt="" />
    <a href="javascript:upPhoto();">提交</a>
    <br>
    <span>导入数据</span>
    <input type="file" name="name" accept=".xlsx" onChange="handleInputChange(this);">
    <span id="result"></span>
    <a href="javascript:myImport();">提交</a>
    <script type="text/javascript" charset="utf-8" src="/builder/js/../../vendor/jquery/dist/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="/builder/js/../../vendor/underscore/underscore.js"></script>
    <script type="text/javascript">

    function upPhoto(){
      var data = new FormData();
      for (var i = 0; i < files.length; i++) {
        data.append('files', window.files[i]);
      }
      $.ajax({
        type: 'POST',
        url: "/api/photos/{{app_id}}",
        data: data,
        cache: false,
        contentType: false,
        processData: false
      })
      .done(function(data, textStatus, response) {
        showPhoto.src=data[0].image
        alert(data[0].image)
      }.bind(this))
      .fail(function(jqXHR, textStatus, errorThrown){
        alert('很抱歉，上传图片失败，请稍候再试！');
      });
    }
    function handleInputChange(e){
      window.files=e.files
    }

    function myImport(){
      var data = new FormData();
      data.append('files', window.files[0]);

      $.ajax({
        type: 'POST',
        url: "/api/import/{{app_id}}",
        data: data,
        cache: false,
        contentType: false,
        processData: false
      })
      .done(function(data, textStatus, response) {
        result.innerHTML=data
      }.bind(this))
      .fail(function(jqXHR, textStatus, errorThrown){
        alert('很抱歉，上传失败，请稍候再试！');
      });
    }

// --------- ws 方式
    var app_id = "{{app_id}}";
    var ws = new WebSocket('ws://localhost:3000?id={{app_id}}');
    ws.onmessage = function (event) {
      var data = event.data;
      if (!data)
        return ;
      data = JSON.parse(data);
      switch(data.operate){
        case "login":
          console.log(data);
        break;
        case "setcookie":
          setCookie(data.info.key, data.info.value, 24*60)
        break;
        case "close":
          //alert(1);
        break;
        case "lock":
        break;
        case "switch":
        break;
        case "list":
          console.log(data);
        break;
      }
    };
    ws.onopen = function() {
        console.log('open');
        if (app_id == "asdf")
          ws.send('{"operate":"lock", "info": {"app_id":"{{app_id}}","page_id":"pageid","userid":"userid"}}');
        else
          ws.send('{"operate":"login"}')
    };
// --------- ws 方式
//time为分钟
function setCookie(name, value, time) {
    var expdate = new Date();
    expdate.setTime(expdate.getTime() + time * 60 * 1000);   //时间
    document.cookie = name + "=" + escape(value) + ";expires="+expdate.toGMTString()+";path=/";
}

    </script>
  </body>
</html>
